<template>
  <div>
    <sweet-scrollbar height="800px">

      <sweet-alert description="success alert" type="success" />
      <sweet-alert description="info alert" type="info" />
      <sweet-progress :percentage="100" status="success" />
      <sweet-progress :percentage="50" status="exception" />

      <!-- 消息提示 -->
      <sweetMessage />

      <sweet-tooltip class="box-item" :hide-after="500" effect="light" content="Top Left prompts info" placement="top-start">
        <sweet-button>top-start</sweet-button>
      </sweet-tooltip>

      <sweet-table v-loading="true" :data="tableData" style="width: 100%">
        <sweet-table-column prop="date" label="Date" width="180" />
        <sweet-table-column prop="name" label="Name" width="180" />
        <sweet-table-column prop="address" label="Address" />
      </sweet-table>

      <!-- 弹窗 -->
      <sweetMessageBox />

      <!-- 通知 -->
      <sweetNotify />

      <sweetDialog />
      <br />
      <sweetSkeleton />
      <br />
      <sweet-score-card :value="scoreCardData" :mode="mode"></sweet-score-card>

      <!-- 右键快捷菜单 -->
      <sweetPopupMenu />

      <sweet-popconfirm title="Are you sure to delete this?">
        <template #reference>
          <sweet-button>Delete</sweet-button>
        </template>
      </sweet-popconfirm>

      <div style="line-height: 20px;max-width: 200px">
        <sweet-tooltip class="tooltip-button-item" effect="light" :content="text" placement="top-start" :enterable="false">
          <!-- 多行缩略显示 -->
          <sweet-clamp ref="clamp" autoresize :max-lines="2" max-height="70px" :title="text">{{ text }}</sweet-clamp>
        </sweet-tooltip>
      </div>

      <!-- SweetLoading加载 -->
      <!-- <vSweetLoading /> -->

    </sweet-scrollbar>
  </div>
</template>

<script>
import {h, inject} from 'vue';
import { SweetMessage, SweetMessageBox } from '@hw-seq/sweet-ui-base';

import sweetMessage from './feedback-components/sweet-message.vue';
import sweetMessageBox from './feedback-components/sweet-message-box.vue';
import sweetNotify from './feedback-components/sweet-notify.vue';
import sweetDialog from './feedback-components/sweet-dialog.vue';
import sweetSkeleton from './feedback-components/sweet-skeleton.vue';
import sweetPopupMenu from './feedback-components/sweet-popup-menu.vue';
import vSweetLoading from './feedback-components/v-sweetLoading.vue';

export default {
  components: { sweetMessage, sweetMessageBox, sweetNotify, sweetDialog, sweetSkeleton, sweetPopupMenu, vSweetLoading },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: 'John Smith',
          address: 'No.1518,  Jinshajiang Road, Putuo District'
        },
        {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1518,  Jinshajiang Road, Putuo District'
        },
        {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1518,  Jinshajiang Road, Putuo District'
        }
      ],
      mode: 'vertical',
      scoreCardData: {
        value: '742,693',
        text: 'Page Response Delay',
        data: {
          unit: 'ms'
        },
        options: {
          color: 'red',
          trend: 'increase',
          offset: '比上周期: 1,324'
        }
      },
      text: 'Some very very long text content Some very very long text content Some very very long text content Some very very long text content Some very very long text content Some very very long text content',
    };
  },
  methods: {},
}
</script>
